<template>
  <div class="shopDetail">
      <van-nav-bar title="商品详情" left-arrow @click-left="$router.history.go(-1)">
        <span slot='left' class="topleftIcon"><img src='../../../public/images/qt_75.png'/></span>
      </van-nav-bar>
      <div class="peopleMessage mb-30">
        <img :src='info.userInfo.userPhoto' class="peoplePho l" @click.stop='$router.push({path:"otherUser",query:{userId:info.userInfo.userId}})'/>
        <div class="center l">
          <h1 class="hide_other">{{info.userInfo.userName}}</h1>
          <div><img src="../../../public/images/huizhang.png"/>信用值 &nbsp{{info.userInfo.creditNum}} </div>
        </div>
        <img @click='gz(info.userId,info.isFollow)' src="../../../public/images/qt_50.png" v-if='info.userInfo.isFollow=="-1"' class="btn_gz r" />
        <img @click='gz(info.userId,info.isFollow)' src="../../../public/images/qt_53.png" v-else class="btn_gz r" />
        <div class="clear"></div>
      </div>
      <div :class="{'shopMessage':info.status==0,'shopMessage shopMessageTrade':info.status==1}">
        <div class="title">
          <p class="l">{{info.title}}</p>
          <div class="publicTags l">{{info.quality}}</div>
          <div class="clear"></div>
        </div>
        <p class="time">{{info.dbCreateTime}} 发布</p>
        <div class="price">
          <p class="l">￥{{info.price}}</p>
          <div class="tags_1 l" v-if='info.bargain==0'>不讲价</div>
          <div class="tags_1 l" v-else>可议价</div>
          <div class="clear"></div>
        </div>
        <div class="navs mt-10">
          <div class="navTxt">{{info.content}}</div>
          <img :src="item" v-for='(item,index) in info.images' :key='index'/>
        </div>
        <div class="bot">
          <div class="l">868人看到</div>
          <div class="otherNum1 ml-70 l"><img src="../../../public/images/qt_80.png"/>{{info.commentNum}}</div>
          <div class="otherNum2 ml-70 l"><img src="../../../public/images/qt_78.png"/>{{info.thumbUpNum}}</div>
          <div class="jubao r" @click='$router.push({path:"report",query:{toUserId:info.userId}})'><img src="../../../public/images/qt_83.png"/>举报</div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="liuyan mt-30 mb-30 pt-30 pb-30">
        <div class="btn" @click='$router.push({path:"leaveMessage",query:{targetType:1,targetId:info.commodityId}})'>留言</div>
      </div>
      <div class="liuyanTitle flex_between">
        <h3>全部留言</h3>
        <p>{{comments.totalNum}}条</p>
      </div>
      <ul class="liuyanList">
        <li class="flex_between mb-20" v-for='(item,index) in comments.curPageData' :key='index'>
          <div class="left" @click.stop='$router.push({path:"otherUser",query:{userId:item.userId}})'><img :src='item.userPhoto' width="100%" height="100%"/></div>
          <div class="right ml-30">
            <div class="rightTop">
              <div class="name l hide_other">{{item.userName}}</div>
              <div class="r hf" @click='$router.push({path:"leaveMessage",query:{targetType:2,targetId:item.commentId}})'>回复</div>
              <div class="r mr-60 otherNum1" @click='dianzan(item.commentId,2,item.isThumb)' v-if='item.isThumb=="1"'>
                <img src="../../../public/images/qt_107.png"  />
                {{item.thumbUpNum}}</div>
              <div class="r mr-60 otherNum1" @click='dianzan(item.commentId,2,item.isThumb)' v-else>
                <img src="../../../public/images/qt_80.png" > {{item.thumbUpNum}}</div>
              <div class="clear"></div>
            </div>
            <div class="txt">{{item.content}}</div>
            <ul v-if='item.comments.length!=0'>
              <li v-for='(items,indexs) in item.comments' :key='indexs' @click='$router.push({path:"leaveMessage",query:{targetType:2,targetId:items.commentId}})'>{{items.userName}}：<span>{{items.content}}</span></li>
            </ul>
          </div>
        </li>
      </ul>
      <div class="menu">
        <div class="menuFix flex">
          <div class="otherNum1 l" @click="dianzan($route.query.categoryId,1,info.isThumb)" v-if='info.isThumb=="-1"'>
            <img src="../../../public/images/qt_101.png" />
            点赞</div>
          <div class="otherNum1 l" @click="dianzan($route.query.categoryId,1,info.isThumb)" v-else>
            <img src="../../../public/images/qt_107.png" />
            点赞</div>
            
          <div class="otherNum1 l" @click='$router.push({path:"leaveMessage",query:{targetType:1,targetId:info.commodityId}})'><img src="../../../public/images/qt_104.png"/> 留言</div>
          <div class="otherNum1 l" @click='vueCollects($route.query.categoryId,1,1)' v-if='info.isCollect=="-1"'>
            <img src="../../../public/images/qt_98.png" />收藏
          </div>
          <div class="otherNum1 l" @click='vueCollects($route.query.categoryId,1,-1)' v-else>
            <img src="../../../public/images/qt_982.png"/> 取消收藏
          </div>
          <div class="buy r" @click='wantMay($route.query.categoryId,1)' v-if='info.status==0'>我想要</div>
          <div class="noBuy r" v-else>我想要</div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      info:{},
      comments:{}
    }
  },
  created(){
    this.getMessage();
  },
  methods:{
    getMessage(){
      this.$get(this.$api.market.detail,{commodityId:this.$route.query.categoryId}).then(data=>{
        data.data.commodity.dbCreateTime=this.ConvertIso(data.data.commodity.dbCreateTime);
        data.data.commodity.images=JSON.parse(data.data.commodity.images);

        this.info=data.data.commodity;
        data.data.comments.curPageData.forEach((item,index)=>{
          this.getMorecomments(item.commentId)
        })
        this.comments=data.data.comments;
        console.log(this.info.userInfo.userName)
      });
    },
    getMorecomments(targetId){
      this.$get(this.$api.blog.postsComments,{targetType:2,targetId:targetId,page:1,size:10}).then(data=>{
          console.log(data.data);
          this.comments.curPageData.forEach((item,index,array)=>{
             if(item.commentId==targetId) this.$set(this.comments.curPageData[index],'comments',data.data.curPageData);
          });
          console.log(this.comments);
      });
    },
    jubao(){

    },
    vueCollects(targetId,targetType,cancel){
      let that=this;
      this.vueCollect(targetId,targetType,cancel,function(data){
        that.getMessage();
      })
    },
    dianzan(targetId,targetType,isThumb){
      let that=this;
      this.vueLike(targetId,targetType,isThumb,function(data){
        that.getMessage();
      })
    },
    wantMay(commodityId,deal){
      let that=this;
      this.vueBuy(commodityId,deal,function(data){
        that.$router.push({path:'orderDetail1',query:{id:data}});
      })
     
    },
    gz(userId,follow){
      let that=this;
      this.vueGz(userId,follow,function(){
        that.getMessage();
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .shopDetail{background-color: #F5F5F5;}
  .peopleMessage{padding: 0.3rem;background-color: #fff;}
  .peopleMessage .peoplePho{width: 0.8rem;height: 0.8rem;display: block;overflow: hidden;border-radius: 50%;}
  .peopleMessage .center{margin-left: 0.28rem;}
  .peopleMessage .center h1{font: 0.3rem/0.4rem '微软雅黑';color: #4AACE9;width: calc(100vw - 0.6rem - 2.24rem)}
  .peopleMessage .center div{font: 0.24rem/0.4rem '微软雅黑';color: #999999;}
  .peopleMessage .center div img{display: inline-block;width:0.24rem;height: 0.24rem;margin: 0 0.1rem 0.05rem 0;}
  .peopleMessage .btn_gz{width: 1.16rem;height: 0.46rem;display: block;margin-top: 0.17rem;}
  .shopMessage{padding: 0.3rem;position: relative;background-color: #fff;}
  .shopMessage::before{content: '销售中';background-color: #F88222;width: 0.88rem;height: 0.42rem;text-align: center;border-bottom-left-radius: 0.21rem;font: 0.2rem/0.42rem '微软雅黑';position: absolute;right: 0;top: 0;color: #fff;}
  .shopMessageTrade::before{content: '交易中';background-color: #4AACE9;width: 0.88rem;height: 0.42rem;text-align: center;border-bottom-left-radius: 0.21rem;font: 0.2rem/0.42rem '微软雅黑';position: absolute;right: 0;top: 0;color: #fff;}
  .shopMessage .title{font: 0.42rem/0.6rem '微软雅黑';color: #333333;}
  .shopMessage .title p{display: inline-block;}
  .shopMessage .title .publicTags{margin-top: 0.15rem;}
  .shopMessage .time{font: 0.24rem/0.4rem '微软雅黑';color: #999;}
  .shopMessage .price p{font: 0.48rem/0.8rem '微软雅黑';color: #E63D40;display: inline-block;}
  .shopMessage .price .tags_1{border-radius: 0.18rem;background-color: #EDF0F2;text-align: center;color: #999999;font: 0.18rem/0.36rem '微软雅黑';width: 0.82rem;height: 0.36rem;margin-top: 0.22rem;margin-left: 0.24rem;}
  .shopMessage .navs .navTxt{font: 0.32rem/0.5rem '微软雅黑';color: #333333;}
  .shopMessage .navs img{width: 100%;height:auto;border-radius: 0.2rem;overflow: hidden;display: block;margin: 0.3rem 0;}
  .shopMessage .bot{font: 0.24rem/0.4rem '微软雅黑';color:#AAAAAA;margin-top: 0.34rem;}
  .shopMessage img{width: 0.34rem;height: 0.34rem;display: inline-block;margin:0 0.1rem 0.05rem;}
  .liuyan{width: 100%;background-color: #fff;}
  .liuyan .btn{width: 1.46rem;height: 0.6rem;text-align: center;font: 0.18rem/0.6rem '微软雅黑';color: #fff;border-radius: 0.04rem;margin: 0 auto;background-color: #4AACE9;}
  .liuyanTitle{padding:0.28rem;background-color: #fff;font: 0.3rem/0.5rem '微软雅黑';}
  .liuyanTitle h3{color: #000;}
  .liuyanTitle p{color: #AAAAAA;}
  .liuyanList{padding: 0.3rem;background-color: #fff;margin-bottom: 1.2rem;}
  .liuyanList>li .left{width: 0.7rem;height: 0.7rem;overflow: hidden;border-radius: 50%;}
  .liuyanList>li .right{flex: 1;}
  .liuyanList>li .rightTop {font: 0.24rem/0.7rem '微软雅黑';color: #AAAAAA;}
  .liuyanList>li .rightTop .otherNum1{}
  .liuyanList>li .rightTop .otherNum1 img{width: 0.3rem;height: 0.3rem;display: inline-block;margin: 0.2rem 0.2rem 0.25rem 0.2rem;}
  .liuyanList>li .rightTop .name{color: #4AACE9;font: 0.32rem/0.7rem '微软雅黑';width: 3rem;}
  .liuyanList>li .txt{margin: 0.28rem 0;font: 0.34rem/0.5rem '微软雅黑';color: #323333;}
  .liuyanList>li ul{background-color: #F7F7F7;padding: 0.21rem;}
  .liuyanList>li ul li{font: 0.3rem/0.5rem '微软雅黑';color: #929292;}
  .liuyanList>li ul li span{color: #323333;}
  .menu{position: fixed;left: 0;bottom: 0;background-color: #fff;width: 100%;border-top: 1px solid #F7F7F7;}
  .menu>div{padding:0 0.22rem;font: 0.26rem/1.2rem '微软雅黑';color: #AAAAAA;position: relative;}
  .menu .otherNum1{padding-left:0.29rem;padding-right: 0.29rem;position: relative;}
  .menu .otherNum1:nth-child(1){padding-left: 0;}
  .menu .otherNum1::before{content: '';width: 1px;height: 0.28rem;background-color: #AAAAAA;position:absolute;right: 0;top: 0.46rem;}
  .menu .otherNum1:nth-child(3)::before{display: none;}
  .menu>div img{width: 0.3rem;height: 0.3rem;display: inline-block;margin-right: 0.1rem;margin-bottom: 0.1rem;}
  .menu .buy{flex:1;height: 0.8rem;border-radius: 0.4rem;background-color: #4AACE9;text-align: center;font: 0.3rem/0.8rem '微软雅黑';color: #FFFFFF;margin: 0.2rem 0 0.2rem 0.22rem;}
  .menu .noBuy{flex:1;height: 0.8rem;border-radius: 0.4rem;background-color: #F2F2F2;text-align: center;font: 0.3rem/0.8rem '微软雅黑';color: #555555;margin: 0.2rem 0 0.2rem 0.22rem;}
</style>
